<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收银台 - Limit eShop</title>
		<link rel="shortcut icon" href="icon.svg">
		<style>
			body {
				background-color: white;
				font-family: Misans;
				margin: 0;
				width: 100%;
				min-width: 1533px;
			}
			.daohang {
				width: 100%;
				height: 60px;
				line-height: 20px;
				background-color: #f03752;
				margin: 0;
				padding: 0;
				top: 0;
				position: fixed;
				z-index: 999; /*置于顶层*/
				
			}
			.daohang_xiangmu{
				text-align: center;
			    list-style: none;
			    font-size: 40px;
			    margin-top: 20px;
			    margin-left: 20px;
			    color: white;
			}
			.tips {
				text-align: center;
				margin-top: 80px;
				color: black;
				font-size: 40px;
				margin-bottom: 20px;
			}
			.img {
				text-align: center;
			}
			.back {
				margin: auto;
				text-align: center;
				width: 15%;
				padding: 15px 0 15px 0;
				font-size: 25px;
				color: #f03752;
				background-color: white;
				border:1.5px solid #f03752;
				border-radius: 10px;
				cursor: pointer;
				-webkit-transition: all .3s;
				transition: all .2s;
			}
			.back:hover {
				background-color: #ffcdd1;
			}
			.change {
				width: 10%;
				text-align: center;
				position: fixed;
				top: 40%;
			}
			.rights {
				right:1%;
				width: 20%;
				text-align: right;
				position: fixed;
				top: 90%;
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="daohang">
				<li class="daohang_xiangmu"><b>Limit eShop</b>&emsp;|&emsp;收银台</li>
			</ul>
		</div>
		
			<div class="tips">请扫描下方二维码付款↓</div>
			
			<div class="img">
				<img id="pic" src="src/assets/微信支付.jpeg" height="600px" alt="微信支付">
			</div>
			
			<div style="text-align: center;">
				<span style="font-size: 25px;line-height: 40px;">请在</span>
				<span id="timer" style="color:#f03752;font-size: 25px;font-weight: bold;line-height: 40px;"></span>
				<span style="font-size: 25px;line-height: 40px;">内完成支付</span><br/>
				<span style="font-size: 25px;line-height: 40px;">支付结束后请点击下方按钮</span><br/>
			</div>
			
<div class="back" onclick="window.close()">&nbsp;《 已 扫 码&emsp;</div>
			
			<div class="change">
				<div style="font-size: 20px;font-weight: bold;">切换支付方式</div>
				<br/>
				<a href="Ali_pay page.html"><img src="src/assets/Ali_pay.png" height="34px" alt="支付宝支付"/></a><br/><br/>
				<a href="paypal page.html"><img src="src/assets/paypal.svg" height="34px" alt="PayPal支付"/></a><br/>
			</div>
			
			<div class="rights">
				<div style="font-size: 20px;font-weight: bold;">Designed by Eric Demisse</div>
				<div style="font-size: 20px;font-weight: bold;">Copyright © 2022-2023 ZNF.</div>
				<div style="font-size: 20px;font-weight: bold;">All Rights Reserved.</div>
			</div>
			
			<script type="text/javascript"> 
			            var oBox= document.getElementById('timer');       
			            var maxtime = 5 * 60;  
						var img = document.getElementById("pic");
			            function CountDown() {
			                if (maxtime >= 0) {
			                    minutes = Math.floor(maxtime / 60);
			                    seconds = Math.floor(maxtime % 60);
			                    msg = minutes + "min " + seconds + "s";
			                    oBox.innerHTML = msg;
			                                --maxtime;
			                    } else{
			                            clearInterval(timer);
										img.src = "src/assets/支付失败.jpg"
			                        }
			                    }
			                    timer = setInterval("CountDown()", 1000);                
			</script>
			
	</body>
</html>